<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>贪玩舔狗🐶</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <img class="wsc" src="./img/wsc.jpg" alt="王思聪">
    <!-- <div class="show-score">+1</div> -->

    <div class="play-panel">
        <div class="start"><span class="btn">❥开始游戏</span></div>
        <div class="stop">
            <div class="title">游戏结束</div>
            <div class="score">60分</div>
            <div class="btn">※重新开始※</div>
        </div>
    </div>

    <div class="game-score">
        <h1>剩余时间<span>60</span>秒</h1>
        <h1>+10分</h1>
    </div>


    <script>
        function random(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min)
        }
        // 定义全局变量
        var wscObj = document.querySelector('.wsc')
        var wscX = 0
        var score = 0
        var wscY = (window.innerHeight || document.documentElement.clientHeight) - wscObj.offsetHeight
        //X轴随机食物出现
        function startFoodplay() {
            return setInterval(() => {
                var imgObj = document.createElement('img')

                var who = random(0, 9)//6,8是冠军奖杯   01234579是热狗

                if ([6, 8].includes(who)) {
                    imgObj.className = 'food guanjun'
                    imgObj.src = './img/guanjun.jpg'
                    imgObj.setAttribute('type', 'guanjun')
                } else {
                    imgObj.className = 'food hotdog'
                    imgObj.src = './img/hotdog.jpg'
                    imgObj.setAttribute('type', 'hotdog')
                }
                // 将食物追加到页面
                var min = 0
                var max = (window.innerWidth || document.documentElement.clientWidth) - imgObj.offsetWidth
                imgObj.style.left = random(min, max) + 'px'
                imgObj.style.top = '0px'
                document.body.appendChild(imgObj)
            }, 1000)
        }
        var foodT = startFoodplay()
        //Y轴随机食物出现
        setInterval(() => {
            var foods = document.querySelectorAll('.food')
            foods.forEach((item, index) => {
                var top = parseInt(item.style.top) + 2
                var maxTop = (window.innerHeight || document.documentElement.clientHeight) - item.offsetHeight
                if (top >= maxTop) {
                    document.body.removeChild(item)
                } else {
                    item.style.top = top + 'px'
                }

                // 判断食物在不在撕葱范围内
                var foodX = parseInt(item.style.left)
                var foodY = parseInt(item.style.top) + item.offsetHeight
                if (
                    (foodX > wscX && foodX <= (wscX + wscObj.offsetWidth)) && foodY > wscY
                ) {
                    // score++
                    var type = item.getAttribute('type')
                    type == "guanjun" ? score += 5 : score++

                    console.log(`食物坐标【${foodX},${foodY}】，王公子坐标【${wscX + wscObj.offsetWidth},${wscY + wscObj.offsetHeight}】，+1,总分【${score}】`);
                    document.querySelector('.game-score h1:nth-of-type(2)').innerText = `+${score}分`
                    document.body.removeChild(item)

                    // 定义+1或者+5出现的位置(wscX的距离加上wsc自身的宽度)
                    var divObj = document.createElement('div')
                    divObj.className = 'show-score'
                    console.log(1111, type)
                    divObj.innerText = type == 'guanjun' ? '+5' : '+1'
                    divObj.style.left = wscX + wscObj.offsetWidth + 'px'
                    document.body.appendChild(divObj)
                    setTimeout(() => document.body.removeChild(divObj), 1000)
                }
            })
        })

        // 安排撕葱
        document.onmousemove = function (evt) {
            var e = evt || window.event
            var wscObj = document.querySelector('.wsc')
            let left = e.clientX - wscObj.offsetWidth / 2
            let maxLeft = (window.innerWidth || document.documentElement.clientWidth) - wscObj.offsetWidth
            if (left < 0) left = 0
            if (left >= maxLeft) left = maxLeft
            wscObj.style.left = left + 'px'

            // 重置坐标
            wscX = left
        }


        // 结束游戏
        var time = 3
        function startTimePlay() {
            return setInterval(() => {
                time--
                var gameScoreObj = document.querySelector('.game-score span')
                if (time > 0) {
                    gameScoreObj.innerText = time
                } else {
                    clearInterval(gameT)//清除游戏倒计时
                    clearInterval(foodT)//清除随机出现的食物
                    time = 60
                    // 将重新开始面板显示
                    var payPanel = document.querySelector('.play-panel')
                    var payPanelStop = payPanel.querySelector('.stop')
                    payPanel.querySelector('.score').innerText = score + '分'
                    payPanel.style.display = payPanelStop.style.display = 'block'
                }
            }, 1000);
        }
        var gameT = startTimePlay()


        // 重新开始
        var startBtn = document.querySelector('.play-panel  .stop .btn')
        startBtn.onclick = function () {
            score = 0
            document.querySelector('.game-score h1:nth-of-type(2)').innerText = `+${score}分`
            // 开始游戏
            foodT = startFoodplay()
            gameT = startTimePlay()
            // 开启面板
            var payPanel = document.querySelector('.play-panel')
            var payPanelStop = payPanel.querySelector('.stop')
            payPanel.style.display = payPanelStop.style.display = 'none'
        }

    </script>
</body>

</html>